<template>
	<div class="right-box">
		<Breadcrumb style="margin-bottom: 5px;">
	        <BreadcrumbItem>
	            <Icon type="ios-stats" color="red" size="18"></Icon> 报表管理
	        </BreadcrumbItem>
	        <BreadcrumbItem>
	           报损报表
	        </BreadcrumbItem>
	    </Breadcrumb>
	    <div class="report-box">
	   		<div id="canvas" :style="{width: '100%', height: '100%'}"></div>
	    </div>
	</div>
</template>

<script>
	export default{
		name:'adviceReport',
		data(){
			return{
				myChart:'',
				options: {
					grid: {
						top: 20
					},
					tooltip: {
						trigger: 'axis',

						formatter: "新增商品 : {c}",

						axisPointer: {
							type: 'cross',

							crossStyle: {
								color: '#999'
							}
						}
					},

					xAxis: [{
						type: 'category',
						show: true,
						data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
						axisPointer: {
							type: 'shadow'
						},
						axisTick: {
							show: false
						},
					}],

					yAxis: [{
							type: 'value',
							name: '',
							min: 0,
							max: 200,
							axisLabel: {
								formatter: '{value}'
							},
							axisTick: {
								show: false
							}
						},

					],
					series: [{
							name: '保障率',
							type: 'bar',
							barWidth: '30%',
							label: {
				            show: true,
					            position: 'top',
					            textStyle: {
					                color: '#EA9294',
					                fontSize: 14,
					            }
					        },
							data: [{
									value: 30,
									itemStyle: {
										normal: {
											color: '#EA9294'

										}
									}
								},
								{
									value: 60,
									itemStyle: {
										normal: {
											color: '#EA9294'

										}
									}
								},
								{
									value: 70,
									itemStyle: {
										normal: {
											color: '#EA9294'

										}
									}
								}, {
									value: 80,
									itemStyle: {
										normal: {
											color: '#EA9294'

										}
									}
								}, {
									value: 20,
									itemStyle: {
										normal: {
											color: '#EA9294'

										}
									}
								}, {
									value: 30,
									itemStyle: {
										normal: {
											color: '#EA9294'

										}
									}
								},
								{
									value: 200,
									itemStyle: {
										normal: {
											color: '#EA9294'

										}
									}
								},
								{
									value: 70,
									itemStyle: {
										normal: {
											color: '#EA9294'

										}
									}
								}, {
									value: 80,
									itemStyle: {
										normal: {
											color: '#EA9294'

										}
									}
								}, {
									value: 20,
									itemStyle: {
										normal: {
											color: '#EA9294'

										}
									}
								}, {
									value: 30,
									itemStyle: {
										normal: {
											color: '#EA9294'

										}
									}
								},
								{
									value: 60,
									itemStyle: {
										normal: {
											color: '#EA9294'

										}
									}
								}
							]
						},

						{
							lineStyle:{
								color:'#eee'
							},
							type: 'line',
							name: '占比',
							data: [30, 60, 70, 80, 20, 30, 200, 170, 80, 20, 30, 60]
						}
					]
				}
			}
		},
		methods:{
			getOutReport(){
				this.myChart.setOption(this.options)
			},
			getData(){
				let that = this
				this.$axios({
	    			method:'post',
	    			url:that.GLOBAL.url+'/sys/getItemDiskReport',
	    			data:{
	    			},
	    			transformRequest:[function(data){
	    				let ret = ''
	    				for(let it in data){
	    					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
	    				}
	    				return ret
	    			}],
	    			xhrFields:{
	    				widthCredentials:true
	    			},
	    			crossDomain:true,
	    			header:{
	    				'Content-Type': 'application/x-www-form-urlencoded'
	    			}
	    		}).then(res=>{
	    			console.log(res)
	    			if(res.data.code == 200){
	    				let month = new Date().getMonth()
						let data
						this.monData = []
						let seriesData = []
						//折线数据
						for(let val in res.data.itemDiskList){ 
							this.monData.push(res.data.itemDiskList[val])
						}
						//柱状数据
						this.monData.forEach(item=>{
							data = {
									value:item,
									itemStyle: {
										normal: {
											color: '#00CCFF'
										}
									}
								}
							seriesData.push(data)
						})
						seriesData[month].itemStyle.normal.color = 'rgba(30, 144, 255, 1)'
						this.options.series[0].data = seriesData
						this.options.series[1].data = this.monData
						this.options.yAxis[0].min = Math.min(...this.monData)
						this.getOutReport()
	    			}else{
	    				this.$Message.error(res.data.msg);
	    			}
	    		}).catch(function(err){
	    			console.log(err)
	    		})
			}
		},
		mounted(){
			this.getData()
			this.myChart = this.$echarts.init(document.getElementById('canvas'))
			window.onresize = this.myChart.resize()
		}
	}
</script>

<style>
.right-box{
	width: 100%;
	height: 100%;
	position: relative;
}
.report-box{
	width: 100%;
	height: 500px;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
</style>